<template>
  <div class="box">
    <div class="num-box">
      <div v-for="(item,index) in count+1" :key="item" class="item" :class="index>count - colorCount?'font-white':''">{{index}}</div>
    </div>
    <div class="color-box">
      <div v-for="(item,index) in count" :key="item" class="color-item" :class="index>count - colorCount-1?'color-white':''"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "step",
  props: {
    // 数量
    count: {
      type: Number,
      default: 0,
    },
    // 多少 没有 颜色
    colorCount:{
      type:Number,
      default: 0
    }
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.color-white{
  background-color: #c4c6cc;
}
.font-white{
  color:#c4c6cc!important;
}
.font-white:last-child{
  
}
.box{
  margin-top:20px;
}
.num-box {
  display: flex;
  .item{
    color:#ed5757;
    font-size:20px;
    font-weight: 350;
    font-family: 'Microsoft YaHei';
  }
  .item:nth-of-type(1){ margin-right:67px; }
  .item:nth-of-type(2){ margin-right:75px; }
  .item:nth-of-type(3){ margin-right:75px; }
  .item:nth-of-type(4){ margin-right:75px; }
  .item:nth-of-type(5){ margin-right:75px; }
  .item:nth-of-type(6){ margin-right:72px; }
  .item:nth-of-type(7){ margin-right:75px; }
  .item:nth-of-type(8){ margin-right:73px; }
  .item:nth-of-type(9){ margin-right:75px; }
  .item:nth-of-type(10){ margin-right:60px; }
  // justify-content: space-around;
  // justify-content: space-between;
}
.color-box {
  margin-top:10px;
  display: flex;
  border-radius: 6px;
  background-image: linear-gradient(
    to right,
    rgb(255, 165, 141),
    rgb(247, 87, 87)
  );
  .color-item {
    flex: 1;
    height: 10px;
    border-right: 1px solid #fff;
  }
  .color-item:last-child {
    border-right: 0;
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
    
  }
  .color-item:first-child {
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
  }
}
</style>